<template>
  <div style="display: flex; margin-top: 15px; cursor: pointer">
    <div :class="selected ? 'rectangle' : 'rectangle-2'">
      <slot></slot>
    </div>
    <div :class="selected ? 'triangle' : 'triangle-2'"></div>
  </div>
</template>

<script>
export default {
  name: 'SideBarTab',
  data () {
    return {}
  },
  props: {
    selected: {
      type: Boolean,
      require: true
    }
  }
}
</script>

<style scoped>
.rectangle {
  width: 150px;
  height: 50px;
  line-height: 50px;
  border-radius: 10px 0 0 10px;
  background-color: rgba(235, 120, 103, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 20px;
  text-align: center;
  font-family: Roboto, serif;
}

.rectangle-2 {
  width: 150px;
  height: 50px;
  line-height: 50px;
  border-radius: 10px 0 0 10px;
  /*background-color: rgba(235, 120, 103, 100);*/
  color: black;
  font-size: 20px;
  text-align: center;
  font-family: Roboto, serif;
}

.triangle {
  width: 0; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
  height: 0;
  border-top: 25px solid transparent;
  border-left: 25px solid rgba(235, 120, 103, 100); /*transparent 表示透明*/
  border-bottom: 25px solid transparent;
}

.triangle-2 {
  width: 0; /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
  height: 0;
  border-top: 25px solid transparent;
  border-left: 25px solid transparent; /*transparent 表示透明*/
  border-bottom: 25px solid transparent;
}
</style>
